<template>
  <div>
    <a-page-header
      :ghost="false"
      title="学生考试统计/STUDENT EXAMINATION STATISTICS"
    >
    </a-page-header>

    <div v-if="flag == true">
      <a-card
        :bordered="false"
        style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
      >
        可以通过下方不同的卡片所对应的科目进行查看学生考试状态
      </a-card>
      <a-row
        style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
        :gutter="16"
      >
        <a-col
          :xs="{ span: 24 }"
          :sm="{ span: 24 }"
          :md="{ span: 12 }"
          :lg="{ span: 8 }"
          :xl="{ span: 8 }"
          :xxl="{ span: 6 }"
          v-for="(item, idx) in data"
          :key="idx"
          style="margin-top:10px"
        >
          <a-card hoverable>
            <template slot="actions" class="ant-card-actions">
              <a-button
                type="primary"
                @click="checkGrades(item.id, item.examName)"
              >
                查看成绩
              </a-button>
            </template>

            <a-row :gutter="16">
              <a-col>
                <p class="title">{{ item.examName }}</p>
                <p class="member">考试班级：{{ item.examClasses }}</p>
                <p class="memberFinish"></p>
                <p style="clear: both;"></p>
                <p class="date">{{ item.examStartT }}</p>
                <p class="date">{{ item.examEndT }}</p>
              </a-col>
            </a-row>
          </a-card></a-col
        >
      </a-row>
    </div>
    <div v-else style="text-align:center">
      <a-card
        :bordered="false"
        style="margin-left: 16px;margin-right: 16px;margin-top: 16px;"
      >
        暂无数据！您可以先去"考试管理"-"试卷管理"中创建考试，并发布考试。
      </a-card>
      <img
        src="https://img.smitish.com/wp-content/uploads/20201006221843.svg"
        width="500"
        style="margin-top:32px"
        alt=""
      />
      <h1 style="font-size:64px">No Data</h1>
    </div>

    <a-modal
      v-model="examDataVisible"
      title="考试成绩查看"
      okText="确定"
      cancelText="取消"
      :maskClosable="false"
      :destroyOnClose="true"
      :width="1080"
    >
      <a-spin :spinning="spinning"> </a-spin>
      <div v-if="spinning == false">
        <a-button type="primary" @click="excelExport">导出成绩</a-button>
        <a-table
          :columns="columns"
          :rowKey="(record, index) => index"
          :data-source="data_source"
          :scroll="{ x: 1500, y: 300 }"
        >
          <span slot="isPass" slot-scope="isPass">
            <a-tag :color="isPass === '未通过' ? '#f50' : '#108ee9'">
              {{ isPass }}
            </a-tag>
          </span>
        </a-table>
      </div>

      <template slot="footer"> </template>
    </a-modal>
  </div>
</template>

<script>
import ExportJsonExcel from "js-export-excel";
const columns = [
  {
    title: "学生姓名",
    width: 100,
    dataIndex: "name",
    key: "name",
    fixed: "left"
  },
  { title: "主观题得分", dataIndex: "score", key: "4", width: 60 },
  { title: "客观题得分", dataIndex: "objectScore", key: "5", width: 60 },
  { title: "总分", dataIndex: "total", key: "6", width: 50 },
  {
    title: "是否通过测试",
    dataIndex: "isPass",
    key: "0",
    width: 100,
    scopedSlots: { customRender: "isPass" }
  },
  { title: "班级", dataIndex: "className", key: "10", width: 100 },
  { title: "专业", dataIndex: "major", key: "1", width: 100 },
  { title: "学号", dataIndex: "code", key: "2", width: 100 },
  { title: "学院", dataIndex: "college", key: "3", width: 100 },
  { title: "提交时间", dataIndex: "createdTime", key: "7", width: 150 }
];

const data_source = [];
for (let i = 0; i < 100; i++) {
  data_source.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`
  });
}

export default {
  data() {
    return {
      data_source,
      columns,
      examDataVisible: false,
      spinning: true,
      examName: "",
      delayTime: 500,
      data: {},
      flag: true // 是否有数据
    };
  },
  methods: {
    formDate(dateForm) {
      if (dateForm === "") {
        //解决deteForm为空传1970-01-01 00:00:00
        return "";
      } else {
        var dateee = new Date(dateForm).toJSON();
        var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
          .toISOString()
          .replace(/T/g, " ")
          .replace(/\.[\d]{3}Z/, "");
        return date;
      }
    },
    getExaminationList() {
      this.$axios
        .get("/get/exam", {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.data = res.data.data;
            var obj;
            for (let i = 0; i < this.data.length; i++) {
              this.data[i].key = this.data[i].id;
              this.data[i].name = this.data[i].examName;
              obj = JSON.parse(this.data[i].examSetting);
              this.data[i].obj = obj;
              this.data[i].examClasses = obj[0].examClasses;
              this.data[i].examStartT = this.formDate(obj[0].examStartTime);
              this.data[i].examEndT = this.formDate(obj[0].examEndTime);
              this.data[i].examTotalScore = obj[0].examTotalScore;
            }
            console.log("exam-list:", this.data);
          } else {
            this.$message.error("获取失败");
          }
        });
    },
    checkGrades(id, name) {
      this.examName = name;
      this.$axios
        .get("/get/student/score/by/" + id, {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.data_source = res.data.data;
            for (let i = 0; i < this.data_source.length; i++) {
              this.data_source[i].total =
                this.data_source[i].score + this.data_source[i].objectScore;
              this.data_source[i].createdTime = this.formDate(
                this.data_source[i].createdTime
              );
              this.data_source[i].examSetting = JSON.parse(
                this.data_source[i].examSetting
              );
              if (
                this.data_source[i].total >=
                parseInt(this.data_source[i].examSetting[0].examPassScore)
              )
                this.data_source[i].isPass = "已通过";
              else this.data_source[i].isPass = "未通过";
            }

            this.examDataVisible = true;
            this.spinning = false;
          } else {
            this.$message.error("获取失败");
          }
        });
    },
    excelExport() {
      var source = [[]];
      let t = this.data_source;
      for (let i = 0; i < t.length; i++) {
        source[i].push(
          t[i].name,
          t[i].score,
          t[i].objectScore,
          t[i].total,
          t[i].isPass,
          t[i].className,
          t[i].major,
          t[i].code,
          t[i].college,
          t[i].createdTime
        );
      }
      var option = {};
      option.fileName = this.examName + "成绩一览表";
      option.datas = [
        {
          sheetData: source,
          // sheetName: "这是excel下面的分栏名称",
          // sheetFilter: ["key1", "key2"],
          sheetHeader: [
            "学生姓名",
            "主观题得分",
            "客观题得分",
            "总分",
            "是否通过测试",
            "班级",
            "专业",
            "学号",
            "学院",
            "提交时间"
          ],
          columnWidths: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4]
        }
      ];
      var toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
    }
  },
  created() {
    this.getExaminationList();
  }
};
</script>

<style scoped>
.title {
  font-size: 24px;
}
.date {
  font-size: 12px;
  color: #7d7d7d;
}
.member,
.memberFinish {
  font-size: 16px;
}
.memberFinish {
  /* margin-left: 16px; */
}
.ant-card-hoverable:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.09);
  border: 2px solide;
}
</style>
